<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>全选和全不选</title>
    <style>
        div{
            border:solid 1px #ccc;
            width:130px;
            text-align:left;
            padding:0 30px;
            margin:30px auto;
        }
        a{
            color:blue; margin-left:15px; cursor:pointer;
        }
    </style>
</head>
<body>
<div>
    <p><input type="checkbox" /> <span>全选</span>   <a>反选</a> </p>
    <p><input type="checkbox"  > 选项一 </p>
    <p><input type="checkbox" /> 选项二 </p>
    <p><input type="checkbox"/> 选项三 </p>
    <p><input type="checkbox"/> 选项四 </p>
    <p><input type="checkbox"/> 选项五 </p>
    <p><input type="checkbox"/> 选项六 </p>
    <p><input type="checkbox"/> 选项七 </p>
    <p><input type="checkbox"/> 选项八 </p>
    <p><input type="checkbox"/> 选项九 </p>
    <p><input type="checkbox"/> 选项十 </p>
</div>
</body>
<script>
    // 例子思路：
    // 效果：1，全选：点击全选按钮，选项被选中，全选内容变为全不选,反之同理
//        2.点击反选按钮，反着选中；
//    3.当十个选项全部被选中的时候，全选按钮被选中，其内容发生变化
    var all = document.querySelector('input')
    var check = document.querySelectorAll('input')
    var fan = document.querySelector('a')
    var span = document.querySelector('span')
    // 根据checked属性判断选项是否被选中， 自身是个布尔值

    // 效果1：
    all.onclick = function(){
        for(var i = 1; i < check.length; i++){
            check[i].checked = this.checked
        }
        show()
    }

    // 效果2： 反选--按位取反
    fan.onclick = function(){
        for(var i = 1; i < check.length; i++){
            check[i].checked = !check[i].checked
        }
    }

    // 效果3：
    function show(){
        var count = 0
        for( var i = 1; i < check.length; i++ ){
//            if( check[i].checked){
//                count++
//            }
            check[i].checked && count++

//            if( count == check.length - 1 ){
//                all.checked = true
//                span.innerHTML = '全不选'
//            } else {
//                all.checked = false
//                span.innerHTML = '全选'
//            }

            all.checked = ( count == check.length - 1 )
            span.innerHTML = all.checked ? '全不选':'全选'

        }
    }
    show()
    for( var i = 1; i < check.length; i++){
        check[i].onclick = function(){
            show()
        }
    }

</script>
</html>